import React, { useState } from 'react';
import { Form, Input, Modal, Radio, TreeSelect } from 'antd';
import { FormValueType, TreeNode } from '../data.d';

const FormItem = Form.Item;

export interface CreateFormProps {
  treeData?: TreeNode[];
  modalVisible: boolean;
  onSubmit: (values: FormValueType) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<FormValueType>({
    moduleName: '',
    moduleCode: '',
    relativePath: '',
    iconClass: '',
    description: '',
    visible: 1,
    disable: 0,
  });

  const [form] = Form.useForm();

  const { modalVisible, onSubmit: handleAdd, onCancel, treeData } = props;
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleAdd(fieldsValue);
  };
  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增模块"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          moduleName: formVals.moduleName,
          moduleCode: formVals.moduleCode,
          relativePath: formVals.relativePath,
          iconClass: formVals.iconClass,
          description: formVals.description,
          visible: formVals.visible,
          disable: formVals.disable,
        }}
      >
        <FormItem
          label="上级"
          name="parentId"
          rules={[{ required: true, message: '请选择上级！' }]}
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            placeholder="请选择"
            treeDefaultExpandAll
          />
        </FormItem>
        <FormItem
          label="名称"
          name="moduleName"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="路径"
          name="relativePath"
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="图标"
          name="iconClass"
          rules={[{ message: '请输入至少五个字符！', min: 5, max: 20 }]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="描述"
          name="description"
        >
          <Input.TextArea rows={2} placeholder="请输入" />
        </FormItem>
        <FormItem
          label="可见状态"
          name="visible"
        >
          <Radio.Group>
            <Radio value={1} >
              显示
            </Radio>
            <Radio value={0}>
              隐藏
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="启用状态"
          name="disable"
        >
          <Radio.Group>
            <Radio value={0} >
              启用
            </Radio>
            <Radio value={1}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
    </Modal>
  );
};

export default CreateForm;
